<template>
  <div class="water_wrap">
    <!-- <div class="tab">
      <span
        v-for="(item, index) in tabTitList"
        :key="index"
        :class="{ activeTab: selectNum == index }"
        class="tabTit"
        @click="change(index)"
      >
        {{ item }}
      </span>
    </div> -->
    <div class="programmeDetail">
      <span v-for="(item, index) in tabTitList" :key="index" :class="{ active: selectNum == index }"
        @click="change(index)">
        {{ item }}
      </span>
    </div>
    <div class="water-table">
      <Faxq v-show="selectNum == 0" ref="faxqRef" :pageName="'yuan'" />
      <Fxpg v-show="selectNum == 1" :pageName="'yuan'" />
    </div>
    <div class="btm_faxq" v-show="hasBtn">
      <!-- <span class="btnCjfa">推演会商</span> -->
      <span class="btnCjfa" @click="gotoreserveplan"> <img src="@/assets/uemap/Rehearsal_btn1.png"> </span>
      <!-- <span class="btnCjfa">数字孪生</span> -->
    </div>
  </div>
</template>
<script>
import Faxq from './schemeDetailsFaxq.vue'
import Fxpg from './schemeDetailsFxpg.vue'

export default {
  name: 'Water',
  components: {
    Faxq, Fxpg
  },
  props: {
    hasBtn: Boolean,
  },
  data() {
    return {
      selectNum: 0,
      tabTitList: ['方案详情', '风险评估'],
      parentId: '',
      name: '',
      predictionStart:'',
      predictionEnd:''
    }
  },
  watch: {
    // rightFold 右边是否展开
    selectNum: {
      immediate: true,
      handler: function (val, oldVal) {
        if (val === 0) {
          this.$store.getters.pageState.yuYanInfoType = 'FAXQ'
        } else {
          this.$store.getters.pageState.yuYanInfoType = 'FXPG'
        }
      }
    }

  },
  beforeDestroy() {
    this.$eventBus.$off('schemeFxId')
  },
  created() {
    this.$store.getters.pageState.yuYanInfoType = 'FAXQ'
    this.$eventBus.$on('schemeFxId', (res, name,predictionStart,predictionEnd) => {
      this.parentId = res
      this.name = name
      this.predictionStart = predictionStart
      this.predictionEnd = predictionEnd
    })
   
    

  },
  methods: {
    change(index) {
      this.selectNum = index
      if (index === 0) {
        this.$refs.faxqRef.clientWidth(1)
      } else {
        this.$store.getters.pageState.yuYanInfoType = 'FXPG'
      }
    },
    gotoreserveplan() { // 跳转预演预案
      console.log('this.$route.path', this.$route.path);
      // const paths = '/reserveplan/previewPlan'
      const paths = '/reserveplan/visualization'
      const param = {
        'id': this.parentId,
        'name': this.name,
        'isflg': true,
        'predictionStart': this.predictionStart,
        'predictionEnd': this.predictionEnd
      }
      // 判断是否当前
      this.$store.dispatch('closePop')
      if (this.$route.path.indexOf(paths) !== -1) return
      // this.$router.push({ path: paths, query: param })ReserveplanPreviewPlan
      // this.$router.push({ name: 'ReserveplanPreviewPlan', params: param })
      this.$router.push({ name: 'ReserveplanVisualization', params: param })
      this.$store.commit("ISLOADLIST", true);
    }
  }
}
</script>
<style lang="less" scoped>
.titleName {
  width: 100%;
}

.tab {
  justify-content: center;

  .tabTit {
    width: 300px;
    padding: 0;
    text-align: center;
  }
}

.water_wrap {
  //margin-top: 5px;
  height: calc(100% - 25px);
}

.water-table {
  height: calc(100% - 80px);
  height: 700px;
}

.btm_faxq {
  position: absolute;
  bottom: 5px;
  text-align: center;
  width: 100%;

  .btnCjfa {
    margin: 0 5px;

    img {
      width: 35%;
    }
  }
}

.programmeDetail {
  margin: 0;
  text-align: center;
  margin-bottom: 10px;

  &>:last-child {
    margin-left: -5px;
  }

  span {
    width: 122px;
    height: 28px;
    display: inline-block;
    background: url(../../../assets/newimg/button.png) no-repeat center;
    background-size: 100% 100%;
    font-size: 14px;
    text-align: center;
    line-height: 28px;
  }

  .active {
    background: url(../../../assets/newimg/buttonActive.png) no-repeat center !important;
    background-size: 100% 100% !important;

  }
}
</style>
